<template>
  <!-- 参赛选手管理 -->
  <!-- 按钮 -->
  <el-row class="el_row_btn">
    <el-col
      :span="24"
      class="content"
    >
      <div class="content_top_btn">
        <div>
        </div>
        <div>
          <el-space>
            <el-input
              class="top_search_inp"
              v-model="query_data.studentName"
              clearable
              placeholder="搜素：学员姓名"
            />
            <el-input
              class="top_search_inp"
              v-model="query_data.phone"
              clearable
              placeholder="搜素：手机号码"
            />
            <el-button
              size="large"
              :icon="Search"
              circle
              :loading="loading"
              @click="()=>{handleLoad(true)}"
            />
            <!-- <el-button
              size="large"
              :icon="Delete"
              circle
              @click="handleRest"
            /> -->
          </el-space>
        </div>
      </div>
    </el-col>
  </el-row>
  <!-- 内容 -->
  <el-table
    :data="data"
    border
    style="width: 100%"
    v-loading="loading"
    empty-text="暂无参赛选手"
  >
    <el-table-column
      label="学生ID"
      prop="studentId"
      width="80"
    />
    <el-table-column
      label="姓名"
      prop="studentName"
      width="100"
    >
    </el-table-column>
    <el-table-column
      label="手机号码"
      prop="phone"
      width="120"
    />
    <el-table-column
      label="性别"
      prop="gender"
      width="72"
    >
      <template #default="scope">
        <el-tag
          v-if="scope.row.gender==0"
          type="danger"
        >女</el-tag>
        <el-tag
          v-if="scope.row.gender==1"
          type="primary"
        >男</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="证件照"
      prop="documentImg"
    >

      <template #default="scope">
        <el-popover placement="right">
          <template #reference>
            <el-icon
              size="20"
              style="cursor:pointer;"
            >
              <View />
            </el-icon>
          </template>
          <ImageComponent :src="scope.row.documentImg" />
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="学校"
      prop="schoolName"
    />
    <el-table-column
      label="奖项"
      prop="awards"
    />
    <el-table-column
      label="城市赛积分"
      prop="cityIntegral"
    />
    <el-table-column
      label="锦标赛积分"
      prop="championship"
    />
    <el-table-column
      label="创建时间"
      prop="createTime"
      width="180"
    />
    <el-table-column
      label="操作"
      prop="Address"
      width="100"
    >
      <template #default="scope">
        <el-dropdown
          trigger="click"
          @command="(value)=>handleOperate(value,scope.row)"
        >
          <span class="el_dropdown_link">
            操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit-info"><el-icon>
                  <EditPen />
                </el-icon>编辑信息</el-dropdown-item>
              <el-dropdown-item command="remove-item">
                <el-icon>
                  <CircleClose />
                </el-icon>删除人员
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>

    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="total"
      @current-change="handlePage"
    />
  </div>
  <!-- ---------------------------------------------------------------------------- 弹窗 -->
  <!-- 编辑信息 -->
  <el-dialog
    v-model="info_modal"
    title="编辑信息"
    class="info-modal"
    width="960px"
  >
    <InfoForm
      ref="InfoModal"
      @sub="info_modal=false;handleLoad(true)"
    />
  </el-dialog>
</template>

<script  setup>
import { GetInformationApi, DeleteStudentApi } from "@/api/manage/institution"
import { onMounted, ref, nextTick } from "vue";
import { usePage } from "@/hooks/usePage"
import InfoForm from "./components/stu-info-form.vue"
import { ElMessageBox, ElMessage } from 'element-plus'
import ImageComponent from "@/components/image-component/index.vue"
import {
  Delete,
  Search,
  View
} from "@element-plus/icons-vue";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const {
  total,
  data,
  loading,
  query_data,
  handleLoad,
  handlePage
} = usePage({
  api_fn: GetInformationApi,
  q_data: {
    studentName: '',
    phone: ''
  }
})
/**
 * 信息弹窗数据
 */
const info_modal = ref(false)
const InfoModal = ref();
/**
 * 重置
 */
const handleRest = () => {
  query_data.value.phone = "";
  query_data.value.studentName = "";
  handleLoad(true);
}

/**
 * 操作
 */
const handleOperate = (command, row) => {
  if (command == 'edit-info') {
    if (userStore.info_data.auditStatus != 1) {
      ElMessage.error("审核中或审核未通过，暂不支持使用功能")
      return;
    }
    // 更新
    info_modal.value = true;
    nextTick(() => {
      InfoModal.value.handleGetInfo(row)
    })
  } else if (command == 'remove-item') {
    if (userStore.info_data.auditStatus != 1) {
      ElMessage.error("审核中或审核未通过，暂不支持使用功能")
      return;
    }
    // 删除
    ElMessageBox.confirm('是否删除该选手', "提示", {
      "cancel-button-text": "取消",
      "confirm-button-text": "确定",
    }).then(async () => {
      let res = await DeleteStudentApi({
        studentId: row.studentId
      })
      if (!res.success) {
        ElMessage.error(res.message);
      } else {
        ElMessage.success(res.message);
      }
      handleLoad(true)
    })
  }
}

defineExpose({
  handleLoad
})

// ------------------------------------------------------------------
onMounted(() => {
  handleLoad(true);
})
</script>

<style lang="scss" scoped>
.header_information {
  .header_name {
    margin-left: 10px;
    margin-right: 10px;
    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }
    h1 {
      font-size: 28px;
    }

    // 线
    .header_line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0 20px 0;
      background-color: #8473f717;
    }
  }
  //   内容
  :deep(.table_btn_success) {
    padding: 0 5px !important;
    border: none;
  }
  :deep(.el-table) .cell {
    padding: 0 10px;
  }
  .el_row_btn {
    margin-bottom: 20px;

    .content {
      .content_top_btn {
        display: flex;
        justify-content: space-between;
        :deep(.tob_tabs) {
          span {
            font-size: 14px !important;
          }
        }
        .top_search_inp {
          width: 300px;
          height: 40px;
          margin-right: 5px;
        }
        .top_search_btn {
          width: 110px;
          margin-right: 5px;
        }
      }
    }
  }
  .el_dropdown_link {
    font-size: 14px;
  }
  :deep(.el-table)__cell {
    padding: 12px 0 !important;
  }
}
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
// modal
.info-modal {
}
</style>